добро пожаловать обратно в веб-разработки упростили мой
зовут Кайл, и вы можете себе представить, когда
Вы используете Интернет почти каждый
веб-сайт, который вы используете, имеет некоторую форму
журнал и компонент к нему, где у вас есть
учетная запись пользователя вы можете войти выйти и т. д.
и я держу пари, что проект, который вы
думать о работе также имеет, что
точно такой же компонент входа в систему, так что в сегодняшнем
видео, которое я собираюсь показать вам
шаблонный шаблон для настройки
Ваша собственная система входа в систему
ваше приложение
давайте начнем сейчас Прежде чем мы прыгнем
в кодировании позвольте мне показать вам
абсолютно красивый сайт
что мы собираемся встроить в это видео
ну, может быть, не так красиво, что мы имеем
вот экран входа в систему, мы можем нажать
зарегистрируйтесь и перейдите на наш экран регистрации
и скажем, что мы регистрируем пользователя
здесь просто очень простой пользовательский клик
зарегистрируйтесь, это приведет нас к нашему логину
страницы, а затем, если мы хотим войти, давайте
скажем, мы выбрали адрес электронной почты, который не
существует, и мы собираемся выбрать пароль
и мы нажимаем логин, он скажет нам, что
пользователь с электронной почтой не существует
и если мы действительно войдем в систему с правильным
адрес электронной почты, но неправильный пароль
нам наши пароли неверны и наконец
если мы введем в тот же адрес электронной почты и
тот же пароль и нажмите Войти это
собирается привести нас к отображению страницы
наше имя и дайте нам кнопку выхода
также, если вы перенаправляете на эту страницу входа
это на самом деле собирается прочитать вашу бывшую
на эту домашнюю страницу, потому что мы уже
вошли в систему, как только мы нажмем выйти
хотя это вернет нас к логину
и если мы попытаемся перейти на эту домашнюю страницу
не позволит нам, сестры, перенаправить
мы вернулись на страницу входа, так что теперь мы
знать, что мы строим, давайте запустим
Visual Studio код, и мы просто собираемся
иметь полностью пустой проект
начать, потому что это лучшее
способ сделать вещи и первое, что мы
нужно сделать, это инициализировать наш проект
так как мы собираемся использовать NPM для
хранить все наши зависимости мы можем
просто введите NPM, и мы можем просто
использовать значения по умолчанию, чтобы мы могли нажать
введите кучу раз и здесь мы идем
это даст нам package.json
где мы будем хранить все
наших зависимостей и начать
Я только собираюсь установить
зависимости мы собираемся получить
основное приложение работает, а затем
мы установим Pendency Zazz мы бежим
в необходимости их позже, чтобы мы могли
введите npm я и это позволит
мы начинаем устанавливать зависимости и
первая зависимость нам нужна называется
Экспресс это будет наше приложение
сервер и следующая зависимость нам нужна
это EJS, и это будет наш шаблон
язык для всех разными взглядами такими
как войти в систему зарегистрироваться и т. д. мы также собираемся
нужно несколько зависимостей развития
так что мы можем набрать в нпм я - - сохранить Dev
только пользователь таблицы для разработки только
и мы хотим
нет дамана, а также точка env и узел
Мент собирается позволить нам перезагрузить
наш сервер автоматически каждый раз, когда мы
внести изменения и точка env просто позволит
нам иметь переменные среды, которые мы
может хранить его внутри файла точка env
что мы можем загрузить на наш сервер так
давайте создадим этот файл EMV сейчас просто позвоните
это env, и это где наш
переменные среды пойдут, и мы
Также хочу создать здесь точку получить
игнорировать, потому что мы на самом деле хотим
игнорировать эти файлы, которые мы не хотим
совершить нашу env, и мы также не хотим
зафиксируйте наши модули узлов в нашем git
хранилище и это потому, что узел
модули просто все наши установлены
зависимости и env могут содержать
секретная конфиденциальная информация, которую мы не делаем
хочу поделиться этим миром самым последним
вещь, которую нам нужно сделать, это на самом деле установить
до нашего package.json, чтобы мы могли начать
наш сервер внутри этого раздела скрипта
давайте просто создадим скрипт с именем dev
начать и внутри вот что мы
собираюсь сделать, мы просто собираемся бежать
узел Mon и мы будем запускать сервер GS
который является файлом сервера, который мы собираемся
создавать сейчас мы можем сохранить, что создать
этот файл сервера
извините ojs и теперь внутри консоли, если
мы запустили узел Mon Whoops не узел Mon
если мы запустим NPM, запустим, как
что это будет запускать этот скрипт
что мы только что создали здесь этого мертвого
запустить сценарий и каждый раз, когда мы
внести изменения в наш сервер, ревностно это
собирается обновить наш сервер и перезапустить
весь наш код, чтобы начать очень
Первое, что мы хотим сделать, это просто настроить
наше основное приложение Express, так что давайте
Экспресс-импорт, мы можем сделать это, просто используя
выразительная переменная, мы можем просто сказать,
требуется экспресс, который собирается принести в
Экспресс, и мы также хотим получить приложение
переменная из Express, поэтому мы можем просто сказать,
вызвать функцию Express здесь, и если мы
спустись сюда и набери в приложении точку
слушать и дать ему порт у нас теперь есть
приложение работает на порту 3000, когда мы
сохранить что мы идем на localhost 3000 вы
можно увидеть, что мы не можем получить косую черту и
это потому, что у нас нет настроенного маршрута
для нашего приложения, поэтому первое
мы должны сделать, это настроить маршрут, который мы можем
просто скажи apt-get slash это будет
быть нашей домашней страницей маршрут, который вам понадобится
войти в систему для доступа и вместо
отсюда мы просто получаем функцию, которая имеет
переменная запроса и ответ
переменная и все, что мы хотим сделать, это
на самом деле отправить им определенную страницу, которая
мы собираемся создать, чтобы мы могли просто сказать,
ответная точка рендеринга и внутри здесь
мы хотим визуализировать файл, который мы собираемся
называть этот индекс EJS, и мы можем сказать, что
и сейчас у нас нет файлов
будучи оказанным
для того, чтобы получить то, что мы работаем
нужно сделать, это создать папку с именем
взгляды и внутри здесь нам нужно
создать этот индекс просмотра ejs и сейчас
вместо этого давайте просто положить некоторый код
мы будем ставить h1 возгласы h1 и внутри
это мы просто собираемся сказать привет так же, как
это сохранить, и теперь, когда мы обновляем
это вы видите, что мы получаем скрыть отправку
на сервер сейчас, чтобы использовать
Синтаксис EGS нам нужно сообщить нашему серверу
что мы используем EJS так внутри отсюда
мы можем сказать, точка набора приложений и что мы хотим
чтобы сделать, мы хотим установить двигатель представления
так же, как это мы можем сказать, введите
посмотреть двигатель, и мы хотим установить это здесь
к EJS, и именно поэтому мы установили, что
EJS зависимость раньше, потому что теперь наш
Просмотр двигателя установлен на EJS, и мы можем
на самом деле использовать EGS в нашем шаблоне так для
Пример, скажем, что мы хотим передать
пользователь вниз, мы можем просто сказать, что пользователь должен
просто сказать, что мы хотим передать имя и
мы можем просто дать имя Кайлу для
пример в качестве основного примера и внутри
здесь мы можем просто поставить это имя
положить его внутри этого меньше, чем с
процент и знак равенства это роскошь
вывести переменную, и мы могли бы просто
сделать имя сейчас, если мы сохраним это и мы
освежитесь здесь, вы увидите нас как привет
Кайл теперь, когда у нас супер просто
Настройка сервера давайте создадим
маршруты нам нужны для нашей страницы входа и
нашу регистрационную страницу сначала мы создадим
взгляды для них мы будем называть это логин dgs
и мы также создадим представление здесь позвоните
регистр EJS это были бы наши два
разные страницы, а затем внутри нашего
Сервер мы собираемся создать маршруты для
оба из тех, поэтому мы можем просто использовать получить
маршруты снова
так как мы просто хотим получить их через
URL первым будет логин
и снова он возьмет запрос и
ответ, а не здесь, что мы
хотите сделать, вы просто хотите скопировать это
код здесь для рендеринга, но вместо
мы хотим сделать наш логин dgs и мы
не нужно беспокоиться о прохождении
дополнительная информация к нему, так вот наш
войдите и мы можем сделать то же самое
вещь для регистрации, за исключением того, что мы
собираюсь изменить наш маршрут, чтобы зарегистрироваться
и мы хотим убедиться, что мы делаем
зарегистрированный файл EJS, который находится внутри
из нашей папки просмотров сейчас, если мы сохраним это
и вместо этого мы просто помещаем текст
войдите и здесь мы помещаем текст
зарегистрироваться убедитесь, что мы сохраним оба
и если мы перейдем к слэш-логину, вы увидите
это говорит логин и если мы пойдем к слэшу
зарегистрируйтесь, вы увидите, это говорит, зарегистрируйтесь сейчас
что мы знаем, что наши страницы отображаются
давайте создадим фактический HTML внутри
их для рендера в наших формах будет
зарегистрироваться первым и первым делом мы
хочу сделать, мы хотим иметь H1 и
внутри отсюда мы просто собираемся
но текстовый регистр, поэтому мы знаем, что
мы на нашей странице регистрации, а затем
после этого у нас будет форма
который будет содержать все наши
разные входы убедитесь, что мы закрываем
и внутри этой формы мы собираемся
иметь действие упс действие и это
действие здесь будет слэш
зарегистрироваться, и мы хотим убедиться, что
мы меняем метод здесь, чтобы быть постом и
это означает, что мы собираемся опубликовать на
маршрут с именем слеш регистр
внутри нашего сервера, так что давайте создадим
что прямо сейчас мы сделаем это прямо здесь
после нашего apt-get и этот собирается
быть приложением точка пост, и это будет
быть тем же путем регистрации и снова
это будет иметь запрос и
переменная ответа внутри этого
функция, и мы просто реализуем это
позже пока мы будем работать над
убедившись, что наш HTML в реестре
что EJS завершен первое, что мы
нужно сделать, мы должны иметь ряд так
мы просто будем использовать div для этого и
этот ряд на самом деле будет содержать
вся наша информация для нашего логина и
для имени, поэтому мы будем здесь
ввод или метка в первую очередь и как метка
будет для нашего элемента имени, и мы
хочу убедиться, что мы просто пометить это как
название убедитесь, что вы закрыли этот ярлык
Затем мы можем реально создать вход
который будет для этого имени это
собирается иметь тип здесь упс
который будет текст, который мы хотим
убедитесь, что мы даем ему идентификатор, который является
так же, как четыре, так что это будет
по имени и мы также хотим дать ему имя
вот как мы будем получать доступ к нему на
сервер, и это будет просто по имени
наконец, мы хотим убедиться, что это
требуется, поэтому мы используем необходимые
атрибут теперь давайте сохраним это обновление
наша страница, и вы увидите, у нас есть наше имя
вход прямо здесь, давайте скопировать это вниз
потому что нам понадобится еще несколько
входы мы собираемся иметь наш первый
вход, который будет электронной почтой так
мы просто все изменим
здесь к типу электронной почты будет
по электронной почте упс, мы хотим убедиться,
идентификатор электронной почты, поэтому он соответствует этому для
и, наконец, имя электронной почты и вниз
здесь мы собираемся сделать то же самое, но
мы собираемся сделать это для пароля, чтобы сделать
уверен, что мы изменим весь наш старый текст, чтобы быть
тип пароля - пароль
и, конечно, зовут пароль сохранить, что
и обновить, и вы видите, теперь у нас есть
Назовите нашу электронную почту и наш пароль
установить последнее, что нам нужно сделать, это
на самом деле, чтобы создать кнопку для отправки
наша форма, поэтому мы просто создадим кнопку
с типом отправки и вместо
здесь мы можем просто вставить текст
зарегистрируйтесь сейчас мы сохраняем это обновление мы
есть все наши элементы формы для
регистрация нашей страницы последняя вещь
мы будем хотеть сделать это на самом деле
add in an anchor tag which will just
link us back to our login page so we'll
just have an href
which is going to go to /login and we
just want to put in the text login now
if we refresh and click login you'll see
we get brought back to our login page
and our login page is going to be almost
exactly the same as register so let's
copy that paste it over here instead
we're gonna want to put login up here
and we want to make sure our href is
going to our register page with the text
of register and of course we want to
post to our login route instead of to
our register route also the last thing
we can remove is this name and we can
change this register text here to say
login and now if we refresh this you see
we get a login page as an email a
password a login button and we can go
back to the register page or back to the
login page
we can really change around whichever
one we want to be on now that we have
our pages complete let's go back into
our server and actually implement these
post methods first we want to create the
post method for a login those are just
going to be posting to slash login and
we also since we're going to be getting
information from forms what we need to
do is come up here and we actually need
to say app use and we need to tell it
that we want to use Express that URL
encoded and we want to make sure we pass
it the option of extended we want to put
this as false essentially all that this
is doing is it's telling our application
that what we want to do is take these
forms from our email and password and we
want to be able to access them inside of
our request variable inside of our post
method so inside of post here for our
register we could say request that name
whoops request body that name and that
would correspond to this name field
right here can do the same thing for
email and of course lastly the same
thing for password and what we put after
body here corresponds exactly to this
name field so name is name name is email
name is password whatever this name
field is corresponds to what we're going
to use after body to access it now we're
going to use is instead of using a
database to store our users we're just
going to store them in a local variable
inside of our server so let's create a
variable up here we're just going to say
Const users is going to be equal to an
empty array now this is something you
would never want to do in production but
it's much easier to use just a local
variable as opposed to connecting to an
entire database especially since this
tutorial is only focused on the
authentication and login portion and not
on how to connect to a database if you
want to learn how to connect to a
database in an application I have an
entire full stack course on YouTube for
node.js and MongoDB
you can check out I'll have it linked in
the cards and the description below so
now down here inside of our body we also
need to build a hash our user's password
and to do that we're going to use
something called bcrypt which is a
library that we want to install so down
here inside of our terminal we could
just hit + to open up a new tournament
type in NPM I bcrypt and bcrypt is going
to allow us to hash passwords as well as
to compare hashed passwords to make sure
that our application is entirely secure
once that's done downloading we can come
up to the top here and we can actually
include that so we can say Const decrypt
is going to be equal to require just
like that and we want to make sure we
require bcrypt
the video now we actually have access to
that variable let's make sure we go back
to our other console that has our actual
application running on it and instead of
here what we want to do is we want to
create a new user with the correct
hashed password so to do this we're
going to use a try-catch block because
we actually are using asynchronous code
and what we want to do is we want to
make sure this is an async function so
that we can use trycatch inside of it
and what we want to do is we want to
make a hashed password so we can create
a variable call it hashed password and
that's going to be equal to bcrypt
dot hash and we want to do is we want to
pass it in the password which is request
body dot password and we also want to
pass it how many times that we wanted to
generate essentially that hash how
secure do we want it to be and we're
going to use the value 10 which is just
a good standard default value which is
going to make it fairly quick but also
quite secure and we need to make sure
that we actually await this because this
is asynchronous so it's going to return
after waiting for it so now here we have
an actual hashed password which we can
store in our database and if you want
more in-depth information on security
for authentication with hash hashing
passwords I have an entire video which
I'll also link in the cards in the
description that goes over just
authentication and hashing passwords
using bcrypt inside of nodejs now what
we can do down here is we have that
users variable we can just push a new
user to it and this user is first gonna
have an ID that we can uniquely identify
it for so we'll just use date now to
string this is going to be a unique
identifier for us again if you had a
database this would be automatically
generated so you wouldn't have to worry
about this stuff
next we want to get the name from the
request so we'll say request body dot
name we want to get the email whoops
email which is request
body email and lastly this password is
instead of the request dot body - word
we want to use that hashed password
right here because this is actually safe
to store in our database now if all of
that was successful we want to redirect
the user back to the login page so we
can say response oops the dot redirect
and we want to redirect them to slash
login so that they can log in with the
account they just registered but if for
some reason we had a failure we just
want to redirect them back to the
register page here so redirect to
register and we can remove this bogey
line down here and that's our entire
application for registering users now if
I say that and at the bottom here we
just put a console dot log for our users
so we can see if we added a user we can
come in here type in a name we'll use w
WAW and a password of w if we click
register you'll see down here in the
console we get printed out an ID which
is just the current timestamp we have
the name W email wo W and this hashed
password which is completely safe for us
to store in our database now one thing
to note is that every time we save our
application and it reloads this variable
users is going to get reset to an empty
array so we just have to make sure to
remember that and every time we make a
change we just need to re add our user
and this is purely because we're not
using a database as I said earlier this
is just in memory this is something
again you would not want to do in a
production application now that we have
our register functionality done the next
thing to work on is login and the actual
act of checking to make sure the users
name and email and password are the same
is not too difficult but to actually
persist that user across all of your
different requests it gets a little bit
involved so we're going to use a really
handy library called passport jeaious
which is used by nearly everyone for
authentication so let's go over here to
our other terminal where we can actually
install that and what we want to do is
we just want to type in NPM I and we
want to install passport as well as
passport local and the local version
essentially allows us to use usernames
and passwords for logging in password
has a passport has a bunch of different
ways you can log in whether it's through
Google Facebook local password email etc
so we just want to use the local version
but again if you wanted to experiment
with other versions feel free to also in
order to store and persist our user
across different pages we need to use
something called session so we're going
to install Express
session and and also to display messages
for if we fail to login we're going to
install something called Express flash
which is used by passport inside the
internals to display those nice handy
messages for wrong email wrong password
etc so after that finishes installing
there we go we can actually set up our
passport to be working with our login
and while we could put all this
information into our server file here
it's quickly going to become quite large
and bloated so what I like to do is
actually create a separate file and
we're just going to call this here
Конфигурация паспорта J / S и здесь мы
собираюсь поставить все наши разные
информация, связанная с паспортом, и мы
собираюсь делать все это внутри функции
который мы собираемся просто позвонить
инициализировать там мы идем и внутри
эту функцию мы собираемся инициализировать
наш паспорт, который мы собираемся сделать
уверен, что мы переходим к нашей инициализации
функционировать, а затем внутри нашего сервера
что мы хотим сделать, мы на самом деле хотим
требовать, чтобы мы могли просто спуститься
здесь, и мы можем потребовать эту функцию
мы просто назовем это здесь инициализировать
паспорт ой, и это будет
равно равно требуется и мы хотим
чтобы убедиться, что мы требуем здесь наши
Конфигурация паспорта, а затем мы можем просто
вызвать эту функцию и Ниша Шейлы
паспорт, и мы разместим его в нашем
переменная паспорта, которую мы можем просто получить
с помощью Const Whoops Const паспорт
равен требованию паспорта, который является
только та библиотека, которую мы только что установили
мы вызываем эту функцию
инициализировать паспорт вместо нашего
настроить паспорт и мы можем сделать все
наша конфигурация для паспорта внутри
этот единственный файл и использовать этот локальный
версия паспорта, что мы хотим сделать
собирается подойти сюда, мы хотим создать
переменная, которую мы просто будем называть местным
стратегия
Увы стратегии там мы идем, мы идем
установить это равным, чтобы требовать паспорт
местный, и мы просто хотим получить
Стратегия от того, чтобы мы могли просто сказать,
Точечная стратегия это будет нашим
местная стратегия, и тогда мы можем спуститься
здесь и говорят, что использование паспорта и мы
на самом деле хотите использовать эту местную стратегию
так что мы можем просто сказать новую местную стратегию
и внутри здесь это займет
Варианты первый вариант, который мы хотим
пройти мы хотим передать имя пользователя
поле, и это, по сути, говорит о том, что
наш культ имени пользователя по умолчанию это происходит
быть именем пользователя, но в нашем примере мы
позвонив по этому адресу, так что здесь мы просто хотим
поставить электронное письмо, и вы также можете передать
поле пароля, но по умолчанию
пароль
в нашем приложении мы уже называем
паспорт или пароль, поэтому мы отлично
хорошо, то следующее, что нам нужно
мы действительно должны пройти секунду
переменная здесь, которая будет
функция, которую это собирается вызвать
аутентифицировать нашего пользователя, поэтому мы просто
создать функцию здесь мы просто собираемся
называть это
аутентифицировать пользователя
там мы идем, и мы собираемся пройти в
это имя функции, которая будет создавать
здесь в качестве функции под названием authenticate
пользователь и на самом деле, чтобы сделать это проще
сами мы на самом деле собираемся поставить
эта удивительная функция пользователя билета внутри
нашей функции инициализации мы просто
сделать функцию стрелки, и это
аутентифицировать пользовательскую функцию собирается
принять несколько разных параметров
Первый параметр это будет принимать в
будет электронная почта в нашем случае
это поле имени пользователя на следующий
вещь будет нашим паролем и
наконец, это по существу сделанная функция
мы будем называть это всякий раз, когда мы
завершили аутентификацию нашего пользователя, так что теперь
мы сделали это у нас есть паспорт
использовать настройку следующее, что нам нужно сделать
установлен паспорт для сериализации нашего
пользователь, поэтому мы можем просто прийти сюда
сериализовать пользователя и внутри здесь мы
собираюсь взять функцию, которая собирается
взять пользователя, и он собирается взять его
сделано, и это собирается сериализовать наш
пользователь хранить внутри сеанса и
нам нужно иметь функцию, которая
собираюсь сделать полную противоположность
десериализация нашего пользователя, и это снова
собираюсь взять здесь удостоверение личности и сделал
потому что мы собираемся сериализовать наши
пользователь как один идентификатор, а затем давайте работать
на нашей функции аутентификации пользователя
потому что это по сути то, что мы
будем звонить с нашего логина используя наш
пароль электронной почты, чтобы убедиться, что наш пользователь
исправить так, первое, что мы хотим сделать
получить нашего пользователя по электронной почте, чтобы мы могли просто
создать пользователя здесь, и мы просто собираемся
сказать, что это будет получить пользователь
по электронной почте, и мы собираемся передать в
по электронной почте это функция, которую мы
собираюсь создать, но мы не должны
беспокоиться об этом сейчас мы просто знаем
что это собирается вернуть нам пользователя
по электронной почте или мы собираемся вернуть ноль
если для этого пользователя нет электронной почты, поэтому мы
хочу проверить, чтобы убедиться, что мы
на самом деле есть пользователь, поэтому мы можем сказать, если
наш пользователь нулевой, то мы по какой-то причине
не может найти пользователя, и мы хотим
вернуться, чтобы мы могли просто сказать, возвращение сделано
какую именно функцию нам нужно было вызвать
каждый раз, когда мы закончили и первый
Параметр является ошибкой в ​​нашем случае мы
нет ошибки, потому что ошибка
было бы, если что-то пошло не так на вашем
сервер и в нашем случае ошибки нет
на сервере следующее, что нам нужно
сделать, мы должны вернуть пользователя, которого мы
нашел в нашем случае мы не нашли пользователя так
мы вернем false и мы также можем
возвращение
сообщение, которое будет отображаться это
по сути, наше сообщение об ошибке мы можем
просто скажите, что нет пользователя с этим адресом электронной почты там
мы идем и теперь, когда мы знаем, если мы получим
мимо этого заявления если мы на самом деле
есть пользователь, что мы можем сделать, мы можем
на самом деле пытаются убедиться, что пользователи
пароль соответствует этому паролю
прошел здесь и сделать это, мы
понадобится расшифровать, поэтому давайте удостоверимся
we take in decrypt by using the require
statement whoops
require and we want to require that
bcrypt library just like that and then
down here this is again asynchronous so
we're going to wrap this inside of a
try-catch and inside the try portion of
this try catch what we want to do is we
want to make sure that we check by
awaiting our bcrypt dot compare and the
first thing we want to password is the
password that the user sent in with the
login form which is this password and we
want to compare that to our user dot
password just like this oops password
and if this return is true and that
means that we actually have an
authenticated user so everything
returned successfully but else if it did
not return true then that means that our
users password did not match so let's do
the bad case first we're gonna return
done with no error and we want to return
false here because we don't have a user
again the passwords did not match and we
also want to return a message here and
the spouses are essentially is going to
say password incorrect just like that
and if we for some reason did find the
user our passwords are correct we want
to return done again with no error but
this time we're going to return the user
that we want to actually authenticate
with this is the user that they have
actually logged in as and lastly inside
of our catcher let's catch that error
and we don't return done here but we
won't return that error inside of our
done statement as our first parameter
because we actually had an error with
our application so now the only thing we
have left is this get user by email we
need to make sure we pass that in so
we're going to pass that into our
initialize function here and we need to
make sure down here that we actually
export that function so we're gonna save
modules dot export or I'm sorry module
dot exports is going to be equal to that
initialized function this is just so we
can call that function by requiring in
our passport config that we created here
so back into our server instead of our
passport we actually want to pass in
that function it's going to take in an
email so email and inside of here what
we're going to do is we just
say users dot find and we want to find
where our user dot email is equal to the
email that we passed in and we want to
make sure that we return that and to
make this even easier to read let's make
sure we put all these on different lines
just like this we can actually put this
all into a single line up here there we
go
remove a bunch of these extra
parentheses and there we go this is our
function for finding the user based on
the email and this is our passport that
we're configuring now that we have our
passport configured what we need to do
is we actually need to work on you a
bunch of use statements essentially so
that our server knows how to use
passport the first thing that we want to
do is an app dot use and this one's
going to be for flash which we have not
actually required yet so let's make sure
we require that we're going to say Const
clash is going to be equal to require
whoops in here we have Express flash we
also need to do the exact same thing for
session these are just the libraries
that we installed earlier and now down
here with our app dot use we have flash
as our first one the next one we need to
use is session and session actually
takes a bunch of different options the
first one is a secret this is
essentially a key that we want to keep
secret which is going to encrypt all of
our information for us and we're going
to get this from our environment
variables so we'll say process a NV dot
session whoops session underscore secret
this is just going to be the name of our
secret key which we're gonna put inside
of our MV file so we'll say session
underscore secret and you can set this
to whatever you want in our case we'll
just set it to a secret used to most
likely want to generate this as a random
string of characters so that it's more
secure the longer and more random it is
the more secure it'll be now back inside
of our server here we actually need to
load in our environment variables so
we'll do that at the very top of our
application we can just say if our
process env node E&V; is not equal to
production essentially it means that
we're in development we want to require
that development tendency of dot env and
we want to call dot config this is going
to load in all of our different
environment variables and set them
inside of process env now with that out
of the way we have a few more properties
that we need to set the first one is
resave we want to set this to false
essentially this says should we re save
our session variables if nothing has
changed in our case we don't want to
resave it if
has changed and lastly we have save
uninitialized which again we want to be
false and essentially this is saying do
you want to save an empty value in the
session if there is no value and we
don't actually want to do that now with
flash and session out of the way we can
set up a passport so we can say app that
you use passport initialize this is just
функция внутри паспорта, которая
собираюсь настроить некоторые основы для
нас и так как мы хотим хранить наши
переменные, которые будут сохраняться через
Весь сеанс нашего пользователя мы хотим
использовать сеанс паспорта, который собирается
работать с нашим приложением точка использования сессии до
здесь и что со всем этим, наконец, из
как мы можем спуститься на наш пост
для нашего логина, и мы на самом деле даже не
нужна эта функция, потому что мы просто
собираюсь использовать паспортную аутентификацию
промежуточное программное обеспечение, чтобы мы могли сказать, паспорт точка
аутентифицироваться и мы хотим использовать
местная стратегия и что мы хотим сделать, это
передать список вариантов вещей
что мы хотим изменить первый
будет где мы идем, если есть
успех, так что наш успех перенаправление идет
перейти на нашу домашнюю страницу, которая просто
урезать здесь и по какой-то причине, если
есть сбой, где мы хотим
перенаправить и мы хотим перенаправить их
вернуться к логину, и мы также хотим
убедитесь, что мы показываем сообщение так
мы установим сбой вспышки в истину, это
просто собираюсь дать нам вспышку
сообщение, которое мы можем отобразить пользователю
который будет равен нашему
сообщения здесь, так что нет пользователя с этим
адрес электронной почты или пароль и исправить в зависимости
на что ошибка в том, что они получают и
Теперь для того, чтобы отобразить эту ошибку
сообщение нам нужно зайти в наш логин dgs
и нам нужно использовать наши EGS здесь для того, чтобы
на самом деле сначала есть утверждение if
и мы хотим проверить, если сообщения точка
ошибка и это просто по существу
говоря, что у нас есть сообщение об ошибке и
способ, которым этот воздух сообщений установлен
это вспышка собирается установить сообщения
переменная для всех наших различных вспышек
сообщения сообщения и паспорт идет
установить здесь сообщение об ошибке, которое
будет любая ошибка, которую мы получаем
например здесь ни один пользователь с этим
неверное имя или пароль
быть, какая ошибка установлена, так что если у нас есть
ошибка устанавливается мы хотим сделать, мы
просто хочу сделать это, чтобы мы могли просто
говорят местные жители получили сообщения точка ошибка
на самом деле нам даже не нужны местные жители
мы можем просто повернуть вашу ставку, это просто
сообщения точка воздуха убедитесь, что мы закрываем
выкл и, конечно, мы также должны сделать
уверен, что мы закрываем наши фигурные скобки
вот так теперь мы на самом деле собираемся
показать наше сообщение, если у нас есть один и
если мы сохраним обновление вы можете увидеть, что
мы получаем ошибку, так что давайте пройдемся
к нашему приложению здесь посмотрим, что наши
ошибка
если мы прокручиваем вверх, вы сидите и говорите, что
у нас есть ошибка здесь, в строке 12 это
говоря, что не может понять, что
bcrypt и это на самом деле, потому что это
не могу понять вес, потому что мы
нужно иметь асинхронную функцию
вот так теперь, если мы говорим, что прокрутите назад
вниз
вы видите, мы получаем ту же ошибку
сообщение, потому что я поставил раковину в
неправильное место именно этот аутентифицированный пользователь
это должно быть асинхронным, и теперь, если
Вы экономите, что вы видите, мы получаем
Последняя ошибка здесь мы просто говорим, что
местная стратегия требует проверенного
обратный вызов и упс на самом деле не идут
там и если мы прокрутим вниз, где
мы определяем нашу местную стратегию вы
видим, что мы на самом деле не передаем
аутентифицированный пользователь нашей локальной стратегии
мы передаем его для использования в паспорте, так
давайте удостоверимся, что мы правильно
прохождение аутентификации пользователя к нашему новому
местная стратегия а не паспорт
использовать сейчас давайте сохраним эту прокрутку вниз вы
можно увидеть, что у нас нет ошибок или
приложение, чтобы мы могли обновить здесь
и наша страница входа работает, давайте попробуем
зарегистрироваться у пользователя будет просто W
W на W и W и теперь, если мы попытаемся войти
со случайным электронным письмом и случайным
пароль мы могли бы войти в систему, если мы
убедитесь, что это электронное письмо, и вы будете
увидеть это нет пользователя с таким адресом электронной почты
Теперь мы выберем правильный адрес электронной почты и
неверный пароль и мы получим пароль
неправильно и теперь, наконец, если мы используем
правильный адрес электронной почты и правильный пароль
нажмите на логин и увидите, что он загружается
на некоторое время, и это, вероятно, потому что
у нас есть ошибка, и мы действительно имеем
ошибка, которую мы на самом деле не реализуем
наш пользователь сериализации или наша десериализация
пользовательские функции еще так давайте сделаем это
вместо нашего пользователя сериализации все мы
нужно сделать, это сериализовать нашего пользователя, чтобы мы
можно просто сказать идентификатор пользователя, который мы просто хотим получить
идентификатор пользователя и сохранить его в нашем
сессия, и мы должны убедиться, что мы передаем
это для готовой функции нуль для
наша ошибка и здесь идентификатор пользователя является
актуальная сериализированная версия нашего пользователя
Далее нам нужно сделать почти то же самое
вещь для нашего десериализации, но вместо
вот что мы хотим сделать, мы на самом деле
хочу получить пользователя так, что мы собираемся
сделать, это обернуть это на отдельной строке
так что вам будет легче читать
и мы хотим, чтобы наш пользователь по идентификатору так
мы просто скажем, получить пользователя по идентификатору, и мы
собираюсь передать это в удостоверение личности прямо здесь, что
мы получаем, и мы хотим убедиться,
что мы возвращаем это, и это получить пользователя по
ID это то, что нам нужно, чтобы убедиться, что мы
пройти здесь, так что давайте перейдем в этом
получить пользователя по идентификатору перейти на наш сервер прокрутки
до того, где мы определили, что только право
здесь и мы собираемся определить
функция, которая принимает идентификатор, и мы
собирается получить пользователя по этому идентификатору и
там собирается
почти так же, как наша электронная почта
функция, но вместо сравнения электронных писем
мы будем сравнивать идентификаторы так же, как
это теперь мы можем на самом деле проверить, что мы
можете зайти в нашу электронную почту или зарегистрироваться
уверен, что мы зарегистрируем этого пользователя теперь мы можем
введите адрес электронной почты правильно и
пароль нажмите логин
и вы увидите, что он перенаправляет нас обратно
эта идеальная страница для нашего индекса где
мы хотим войти, если у нас есть
аутентифицированный пользователь и лучшая часть
об использовании паспорта в том, что мы можем получить
наш пользователь действительно легко, а не здесь
вместо того, чтобы передать наше имя, мы хотим
передать имя нашего пользователя, чтобы мы могли просто сказать,
здесь наш запрос точка имя пользователя точка и
запросить, что пользователь просто будет
фактический пользователь, который мы используем сейчас, если
мы сохраняем это, убедитесь, что мы вернемся к нашему
зарегистрировать страницу повторно зарегистрировать нашего пользователя и
мы хотим использовать именно эту электронную почту и
войдите, вы увидите, что имеет высокий W, который
это имя пользователя, которого мы
указано, и это сила использования
сеанс с паспортом это запрос
Пользователь всегда будет отправлен на
пользователь, который аутентифицирован для этого
момент, но есть большая проблема с
наше приложение, например, если бы мы были
просто сохранить это так, чтобы наш пользователь не
дольше существует, мы можем перейти к этому индексу
страница, и это дает нам ошибку, потому что мы
нет пользователя, и мы можем получить доступ к этому
информация, даже если мы не вошли в систему
но, конечно, мы не хотим, чтобы не
авторизованные пользователи для доступа к этому
информация, так что давайте работать над защитой
все наши разные маршруты для когда
мы не вошли в систему и сделать это
на самом деле очень просто давайте просто
минимизировать это, так что это немного
пути, и мы просто хотим создать
новая функция, эта функция собирается
быть проверенным и аутентифицированным
собирается принять ответ на запрос и
Далее это по сути промежуточное программное обеспечение
функция, которая просто собирается взять наш
запрос и ответ и переменная X
что мы называем всякий раз, когда мы сделали
заканчивая нашу аутентификацию здесь
будет проверять подлинность, и мы хотим
сделать, мы просто хотим проверить, если пользователи
заверенный так из-за паспорта мы
Вы можете вызвать функцию по запросу, которая
называется аутентифицированным
аутентифицированы и эта функция просто
собираюсь вернуть истину, если есть пользователь
это подлинность или ложь, если есть
нет пользователя, поэтому, если он возвращает истину, мы можем
просто иди сюда, и мы просто хотим
перезвонить к следующему по существу
говоря, что все работает, просто перейдите к
следующий, но если он возвращает ложь, что мы
хочу сделать, мы собираемся перенаправить
пользователь, поэтому мы будем говорить, перенаправление точки ответа
мы не перенаправляем их на логин
страница
так что теперь мы можем использовать эту проверку
прошедшая проверка
пройти весь путь до здесь мы имеем в нашем
приложение получить и все, что мы хотим
подтвердить подлинность мы просто вставили в эту проверку
проверено подлинность перед нашей фактической функцией
и это будет называться первым, и если
по какой-то причине есть проблема, это будет
на самом деле перенаправить пользователя в этот дом
страница или страница входа, так что теперь она сохранена
что и если мы просто попробуем перейти к этому
страницу вы увидите сразу мы получим
перенаправлены на вход и снова, если мы попробуем
вернуться к тому, что он собирается
перенаправить нас на нашу страницу входа, потому что
мы еще не вошли в систему, мы хотим сделать
то же самое, когда мы вошли в систему
так что если мы войдем с пользователем, мы просто
собирается зарегистрировать нашего же пользователя W и
мы собираемся войти их мы не хотим
чтобы позволить им вернуться к логину для
пример, если я ввожу логин, я могу вернуться
на страницу входа, хотя я
уже вошли в систему, поэтому мы хотим использовать
еще одна проверка, это будет
почти точно так же, чтобы мы могли прийти
здесь функция это будет
называется проверка не заверена это
собираюсь принять в запросе ответ
а дальше и внутри отсюда мы хотим
сделайте ту же проверку, чтобы увидеть, если наши пользователи
аутентифицированы, но если они
аутентифицированы мы хотим перенаправить их
так что мы собираемся сказать, Res точка перенаправления
упс пер Resirect и мы на
перенаправить их на домашнюю страницу так же, как
это он собирается перенаправить их обратно
эта панель и если по какой-то причине
они не аутентифицированы, мы просто хотим
продолжить разговор, так что теперь мы
может поставить эту проверку во всех
места, которые мы хотим проверить, чтобы увидеть, если
например, пользователи, не прошедшие проверку подлинности
мы не хотим разрешать пользователям переходить на
страницу входа, если они уже
аутентифицированы мы не хотим допустить
их войти, если они уже
аутентифицировался так же с регистрацией и
наконец, снова зарегистрироваться здесь все
из них мы хотим убедиться, что нет
пользователи вошли в систему, если они хотят получить доступ
эти разные повторы, так что теперь, если мы
зарегистрировать пользователя с помощью регистра make
уверен, что мы авторизируемся и пытаемся перейти
страница входа выберите тип слеш
URL нажал ввод, и вы видите, что мы
получить ошибку, так что давайте проверим
Функция, которую мы только что написали, и это выглядит как
здесь мы забыли положить в нашем возвращении
для одного перенаправления в пользователя теперь давайте
сказать, что мы вернемся все
путь к нашей зарегистрированной странице
упс, убедитесь, что имя WW же
пользователь, который мы использовали все это время
и мы войдем и теперь, если мы попытаемся перейти к
эта страница входа в систему
Вы видите, что перенаправляет нас обратно к этому
Страница панели инструментов, потому что мы уже
заверенные мы можем сделать то же самое
пытаясь перейти на нашу страницу регистрации
и снова он собирается перенаправить нас обратно
здесь к нашей приборной панели теперь самый последний
вещь, которую мы должны настроить, это наша
окончательный маршрут, который будет для
выход нашего пользователя, потому что прямо сейчас
у нас нет возможности выйти, мы просто
застрял на этой странице, поэтому нам нужно нажать на
удалить запрос, и это запрос на удаление
мы просто позвоним и выйдем
собираюсь взять наш типичный
запрос к сожалению запрос и ответ
переменные так же, как это и внутри
здесь все, что нам нужно сделать, это просто позвонить
запрос точки выхода из системы
так и тогда мы можем просто перенаправить
пользователь, поэтому мы можем просто сказать, точка запроса
перенаправить и мы просто хотим перенаправить
вернуться на страницу входа
эта функция выхода снова что-то
что паспорта устанавливают для нас
автоматически он очистит сеанс и
Выйдите из нашего пользователя и для того, чтобы позвонить
эта функция удаления мы не можем на самом деле
делать это прямо из HTML, что нам нужно
использовать это нам нужно использовать форму, и мы
нужно опубликовать, но так как удалить не
на самом деле поддерживается формами, мы можем только
использовать пост, нам нужно использовать еще один финал
библиотека, так что давайте перейдем и установить
эта библиотека NPM I, и это называется
переопределение метода и, по существу, что
это позволит нам сделать это на самом деле
переопределить наш метод, который мы используем и
поэтому вместо использования почты мы можем на самом деле
вызовите этот метод удаления здесь и сейчас
давайте прокрутить до самого верха
убедитесь, что мы включили эту библиотеку, чтобы мы
Можно сказать, что переопределение метода Const происходит
быть равным требованию метода над
красный, и мы хотим убедиться, что мы используем это
так сказать, AB использовать метод точки над красным и
вместо этого мы просим вас передать то, что
мы хотим, чтобы наш метод переопределения был в нашем
случай, когда мы просто будем использовать подчеркивание
метод это то, что мы собираемся передать
наш метод так, чтобы увидеть, что в
Пример давайте перейдем к нашему индексу здесь и
создать форму, это будет нашим
Форма выхода », так что действие только идет
быть косой
выйти и мы хотим убедиться, что здесь
что мы поставили знак вопроса и
метод подчеркивания, и это будет
равно удалить, так что это подчеркивание
метод - это то, что мы используем для переопределения
наш метод, который мы устанавливаем здесь, который
будет пост, поэтому мы собираемся
переопределить это с помощью удаления, чтобы внутри
нашего сервера здесь мы можем назвать это приложение
точка удалить, что у нас здесь вместо
Хост точка точка для выхода это просто
безопаснее, потому что вы всегда должны использовать
удалить, когда вы удаляете вещи так
теперь спустись сюда внутри нашей формы
все, что нам нужно сделать, это поставить одну кнопку
которая будет нашей кнопкой отправки
поэтому мы ставим тип отправки и вместо
отсюда мы можем просто поставить
текст выхода сейчас, если мы сохраним, что сделать
уверен, что мы регистрируем нашего пользователя, чтобы мы могли
поставить наше имя все те же вещи, которые
мы делали это все время, вы можете
скажем, у нас есть кнопка выхода и когда мы
нажмите, что, конечно, мы собираемся получить
ошибка, и это потому, что, как я вижу
мы ставим редирект точки запроса и это
должен быть ответ точка перенаправления, так что теперь
давайте попробуем это снова давайте удостоверимся, что мы
вернуться на нашу страницу зарегистрировать нашего пользователя
Войти все выглядит хорошо, и мы
нажмите кнопку выхода, и вы увидите, что это возвращает нас
на логин, потому что наши пользователи вошли
и мы больше не можем идти и
наша домашняя страница и, наконец, у нас есть
полностью работающее приложение для входа
Вы можете подключить к своему проекту вы
работая над, если вам понравилось видео сделать
обязательно посмотрите мои другие видео, связанные
здесь, а также подписаться на
канал для больше видео от меня
упрощение сети большое спасибо
для просмотра и хорошего дня.
